<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" >
	
<h:head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style type="text/css">

  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 ; 
  background-color: F27C99;}
       
  #map_canvas { height: 400px;
  				width: 1100px; 
  				font-size: 1.2em;}
  				
 #map_canvas2 { height: 400px;
  				width: 1100px; 
  				font-size: 1.2em;}
 #map_canvas3 { height: 400px;
  				width: 1100px; 
  				font-size: 1.2em;}	
 #map_canvas4 { height: 400px;
  				width: 1100px; 
  				font-size: 1.2em;}				
 .mesaj
 {
  width: 300px;
  height: 100px;
  
 }
 	
 .ui-tabs-nav
 {
 border-color: red;
 border-width: 4px;
 }
 
 #menu
 {
   margin-left:140px;
 }
 

</style>


<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>


<script type="text/javascript" src="/EBlood/WEB/scripts/markerclusterer.js"></script>
<script type="text/javascript" src="/EBlood/WEB/scripts/manageDataMap.js"></script>
<script type="text/javascript" src="/EBlood/WEB/scripts/jquery.js"></script>

<script type="text/javascript" src="/EBlood/WEB/scripts/MapTabMenu/coda-slider.js"></script>
<script type="text/javascript" src="/EBlood/WEB/scripts/MapTabMenu/jquery.localscroll.js"></script>
<script type="text/javascript" src="/EBlood/WEB/scripts/MapTabMenu/jquery.scrollTo.js"></script>
<script type="text/javascript" src="/EBlood/WEB/scripts/MapTabMenu/jquery.serialScroll.js"></script>

<link rel="stylesheet" href="/EBlood/WEB/styles/coda-slider.css" type="text/css" media="screen" title="no title" charset="utf-8"/>


<script type="text/javascript">

        function scroll() {
            var targetOffset = $('#bound').offset().top - ($('#bound').height() / 2);
            $('html, body').animate({ scrollTop: targetOffset }, 1000);
        }
</script>

</h:head>

<h:body onload="initialize();" >

<h:form>
<f:view>

<br/>
<br/>	
<br/>	
<center>

<div id="slider">   
            <ul class="navigation">
                <li><a href="#sites">Acil Kan İhtiyaçları</a></li>
                <li><a href="#files">Nereden Kan Alabilirim?</a></li>
                <li><a href="#editor">Nerede Kan Verebilirim?</a></li>
                <li><a href="#preview">Nerede Bağış Yapabilirim?</a></li>
            </ul>

            <div class="scroll">
                <div class="scrollContainer">
                <div class="panel" id="sites"><div id="map_canvas"></div></div>
                <div class="panel" id="files"><div id="map_canvas2"></div></div>
                <div class="panel" id="editor"><div id="map_canvas3"></div></div>
                <div class="panel" id="preview"><div id="map_canvas4"></div></div>  
                </div>
            </div>

            <div id="shade"></div> 
        </div>
        



<!-- <ui:include src="layouts/DropDownMenu.xhtml"></ui:include>-->


</center>

</f:view>
</h:form>
</h:body>
</html>